CSS @supports -ominaisuuden hallinta: Ominaisuuksien tunnistus modernissa web-suunnittelussa

Jatkuvasti kehittyvässä web-kehityksen maailmassa selainten välinen yhteensopivuus ja tukemattomien ominaisuuksien sulava käsittely ovat ensiarvoisen tärkeitä. CSS:n @supports-sääntö tarjoaa tehokkaan mekanismin ominaisuuksien tunnistamiseen, jonka avulla kehittäjät voivat ehdollisesti soveltaa CSS-tyylejä sen perusteella, tukeeko selain tiettyjä ominaisuuksia. Tämä blogikirjoitus sukeltaa syvälle @supports-säännön yksityiskohtiin, tutkien sen syntaksia, kykyjä ja käytännön sovelluksia vankkojen ja tulevaisuudenkestävien verkkosivujen rakentamisessa.

Mitä on CSS @supports?

@supports-sääntö, joka tunnetaan myös nimellä CSS-tukiselektor, on ehdollinen at-sääntö, jonka avulla voit tarkistaa, tukeeko selain tiettyä CSS-ominaisuutta tai ominaisuuksien yhdistelmää. Se arvioi ehdon ja soveltaa säännön sisällä määriteltyjä tyylejä vain, jos ehto on tosi. Tämä mahdollistaa verkkosivustosi ulkoasun ja toiminnallisuuden progressiivisen parantamisen selaimille, jotka tukevat uudempia CSS-ominaisuuksia, samalla tarjoten sulavat vararatkaisut vanhemmille selaimille.

Ajattele sitä CSS:n "if"-lausekkeena. Sen sijaan, että tarkistaisit JavaScript-muuttujia, tarkistat suoraan CSS-ominaisuuksien tuen.

@supports-säännön syntaksi

@supports-säännön perussyntaksi on seuraava:

            @supports (ehto) {
  /* CSS-säännöt, joita sovelletaan, jos ehto on tosi */
}

            

              
                Copy
              
            
          

ehto voi olla yksinkertainen CSS-ominaisuuden ja arvon pari tai monimutkaisempi lauseke, jossa käytetään loogisia operaattoreita.

Perusesimerkit: Yksittäisten CSS-ominaisuuksien tunnistaminen

Aloitetaan yksinkertaisella esimerkillä display: grid -ominaisuuden tuen tunnistamisesta:

            @supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
  }
}

            

              
                Copy
              
            
          

Tässä esimerkissä, jos selain tukee display: grid -ominaisuutta, @supports-säännön sisällä olevat tyylit sovelletaan .container-elementtiin, luoden grid-asettelun. Selaimet, jotka eivät tue grid-ominaisuutta, yksinkertaisesti jättävät tyylit huomiotta, ja sisältö näytetään todennäköisesti perinteisemmässä lohkoasettelussa.

Toinen esimerkki on position: sticky -tuen tunnistaminen, mikä on hyödyllistä "tahmeiden" ylätunnisteiden tai sivupalkkien luomisessa:

            @supports (position: sticky) {
  .sticky-element {
    position: sticky;
    top: 0;
    background-color: white; /* Paremman näkyvyyden vuoksi */
    z-index: 10;
  }
}

            

              
                Copy
              
            
          

Edistyneet kyselyt: Ehtojen yhdistäminen loogisilla operaattoreilla

@supports-säännöstä tulee entistä tehokkaampi, kun yhdistät ehtoja käyttämällä loogisia operaattoreita, kuten and, or ja not.

"and"-operaattori

and-operaattori vaatii, että molempien sen molemmin puolin olevien ehtojen on oltava tosia, jotta @supports-sääntöä sovelletaan. Esimerkiksi:

            @supports (display: flex) and (backdrop-filter: blur(10px)) {
  .element {
    display: flex;
    backdrop-filter: blur(10px);
  }
}

            

              
                Copy
              
            
          

Tätä sääntöä sovelletaan vain, jos selain tukee sekä display: flex -ominaisuutta että backdrop-filter: blur(10px) -ominaisuutta. Jos jompaakumpaa ei tueta, sääntöjä ei sovelleta.

"or"-operaattori

or-operaattori vaatii, että vähintään yhden sen molemmin puolin olevista ehdoista on oltava tosi, jotta @supports-sääntöä sovelletaan. Harkitse erilaisten valmistajakohtaisten etuliitteiden tarkistamista:

            @supports ((--webkit-mask-image: url(image.png)) or (mask-image: url(image.png))) {
  .masked-element {
    -webkit-mask-image: url(image.png);
    mask-image: url(image.png);
  }
}

            

              
                Copy
              
            
          

Tämä esimerkki tarkistaa joko -webkit-mask-image (vanhemmille Safari- ja Chrome-versioille) tai standardin mask-image-ominaisuuden tuen. Jos jompaakumpaa tuetaan, maskityyliä sovelletaan.

"not"-operaattori

not-operaattori kieltää sitä seuraavan ehdon. Se evaluoituu todeksi vain, jos ehto on epätosi. Tämä on erityisen hyödyllistä vararatkaisujen tarjoamisessa selaimille, jotka *eivät* tue tiettyä ominaisuutta.

            @supports not (display: grid) {
  .container {
    /* Varatyylit selaimille ilman grid-tukea */
    float: left;
    width: 33.33%; /* Esimerkki vararatkaisuasettelusta */
  }
}

            

              
                Copy
              
            
          

Tässä tapauksessa tyylejä @supports not (display: grid) -säännön sisällä sovelletaan selaimiin, jotka *eivät* tue display: grid -ominaisuutta. Tämä varmistaa, että myös vanhemmat selaimet saavat perusasettelun.

Käytännön esimerkkejä ja käyttötapauksia

Tutkitaan joitakin käytännön esimerkkejä siitä, miten @supports-sääntöä voi käyttää verkkosivujen parantamiseen.

1. CSS-muuttujien (Custom Properties) toteuttaminen vararatkaisuilla

CSS-muuttujat tarjoavat tehokkaan tavan hallita tyylejä ja luoda dynaamisia teemoja. Vanhemmat selaimet eivät kuitenkaan tue niitä. Voimme käyttää @supports-sääntöä vararatkaisujen tarjoamiseen:

            /* Oletustyylit (selaimille ilman CSS-muuttujia) */
body {
  background-color: #f0f0f0;
  color: #333;
}

@supports ( --custom-property: true ) {
  body {
    background-color: var(--background-color, #f0f0f0); /* Vararatkaisu, jos muuttujaa ei ole määritelty */
    color: var(--text-color, #333);
  }
}

            

              
                Copy
              
            
          

Tässä määritämme ensin oletustyylit selaimille, jotka eivät tue CSS-muuttujia. Sitten, @supports-säännön sisällä, käytämme var()-funktiota soveltaaksemme CSS-muuttujia, jos niitä tuetaan. Toinen argumentti `var()`-funktiolle on vararatkaisuarvo, jota käytetään, jos mukautettua ominaisuutta ei ole määritelty. Tämä on vankka tapa käsitellä mahdollisesti määrittelemättömiä CSS-muuttujia tukevissa selaimissa.

2. Typografian parantaminen Font-Display-ominaisuudella

font-display-ominaisuus hallitsee, miten fontit näytetään niiden latautuessa. Sitä tukevat useimmat modernit selaimet, mutta vanhemmat selaimet eivät välttämättä tunnista sitä. Näin voit käyttää @supports-sääntöä typografian parantamiseen samalla, kun tarjoat vararatkaisun:

            @font-face {
  font-family: 'MyCustomFont';
  src: url('my-custom-font.woff2') format('woff2'),
       url('my-custom-font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* Oletustyylit */
body {
  font-family: 'MyCustomFont', sans-serif;
}

@supports (font-display: swap) {
  @font-face {
    font-family: 'MyCustomFont';
    src: url('my-custom-font.woff2') format('woff2'),
         url('my-custom-font.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Käytä swap-arvoa moderneille selaimille */
  }
}

            

              
                Copy
              
            
          

Tässä esimerkissä määrittelemme font-face-säännön ja sovellamme sitä body-elementtiin. @supports-sääntö tarkistaa sitten font-display: swap -tuen. Jos sitä tuetaan, se määrittelee font-face-säännön uudelleen font-display: swap -arvolla, mikä ohjeistaa selainta näyttämään varatekstin, kunnes mukautettu fontti on ladattu. Selaimet, jotka eivät tue font-display-ominaisuutta, käyttävät yksinkertaisesti mukautettua fonttia, kun se on ladattu, ilman vaihtokäyttäytymistä.

3. Lomake-elementtien tyylittely Appearance-ominaisuudella

appearance-ominaisuuden avulla voit hallita lomake-elementtien natiivia ulkoasua. Sen tuki voi kuitenkin vaihdella selaimittain. Voit käyttää @supports-sääntöä tarjotaksesi yhtenäisen tyylittelyn hyödyntäen samalla natiiveja ulkoasuja, kun ne ovat saatavilla:

            /* Oletustyylit vanhemmille selaimille */
input[type="checkbox"] {
  /* Mukautettu valintaruudun tyylittely */
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  /* ... muut mukautetut tyylit ... */
}

@supports (appearance: none) or (-webkit-appearance: none) {
  input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    /* Parannettu tyylittely moderneille selaimille */
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    background-color: white;
    position: relative;
    cursor: pointer;
  }

  input[type="checkbox"]:checked::before {
    content: "\2713"; /* Valintamerkki */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    color: green;
  }
}

            

              
                Copy
              
            
          

Tämä esimerkki määrittelee ensin mukautetun tyylittelyn valintaruuduille selaimille, jotka eivät tue appearance-ominaisuutta. Sitten, @supports-säännön sisällä, se nollaa appearance-ominaisuuden arvoon none ja soveltaa parannettua tyylittelyä pseudo-elementtien avulla luodakseen visuaalisesti miellyttävän valintaruudun. Tämä varmistaa yhtenäisen ulkoasun eri selaimissa hyödyntäen samalla natiiveja ulkoasuja, kun se on mahdollista.

4. CSS Shapes -muotojen käyttö vararatkaisuilla

CSS Shapes -ominaisuuden avulla voit luoda ei-suorakulmaisia asetteluja määrittelemällä muotoja, joiden ympäri sisältö voi kiertää. Selaintuki ei kuitenkaan ole yleismaailmallista. @supports antaa sinun toteuttaa sulavan heikennyksen.

            .container {
  width: 400px;
  height: 300px;
  position: relative;
}

.shaped-element {
  width: 200px;
  height: 200px;
  float: left; /* Vararatkaisu selaimille ilman CSS Shapes -tukea */
  margin-right: 20px;
}

@supports (shape-outside: circle(50%)) {
  .shaped-element {
    float: none; /* Poista float-ominaisuus */
    shape-outside: circle(50%);
    width: 200px;
    height: 200px;
    margin-right: 20px;
  }
}

            

              
                Copy
              
            
          

Tässä käytämme float: left -ominaisuutta vararatkaisuna. Selaimet, jotka eivät tue CSS Shapes -ominaisuutta, yksinkertaisesti kelluttavat .shaped-element-elementin vasemmalle. Selaimissa, jotka *tukevat* shape-outside-ominaisuutta, float-ominaisuus poistetaan ja muotoa sovelletaan, jolloin teksti voi kiertää ympyrän ympäri.

5. `object-fit`-ominaisuuden hyödyntäminen kuvien käsittelyssä

object-fit-ominaisuus on erittäin hyödyllinen hallittaessa, miten kuvia skaalataan ja sovitetaan niiden säiliöihin. Tuen puute vaatii kuitenkin vararatkaisuja.

            .image-container {
  width: 200px;
  height: 150px;
  overflow: hidden; /* Varmista, että kuva ei ylitä säiliötä */
}

.image-container img {
  width: 100%;
  height: auto; /* Säilytä kuvasuhde */
}

@supports (object-fit: cover) {
  .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Rajaa kuva täyttämään säiliö */
    object-position: center; /* Keskitä rajattu osa */
  }
}

            

              
                Copy
              
            
          

Oletustyylit varmistavat, että kuva säilyttää kuvasuhteensa säiliön sisällä. @supports-sääntö soveltaa sitten object-fit: cover -arvoa rajatakseen kuvan täyttämään säiliön kokonaan, ja object-position: center keskittää rajatun osan, mikä johtaa yhtenäiseen ja visuaalisesti miellyttävään kuvanäyttöön eri selaimissa.

Parhaat käytännöt @supports-säännön käyttöön

Jotta voit hyödyntää @supports-sääntöä tehokkaasti, harkitse seuraavia parhaita käytäntöjä:

• Progressiivinen parantaminen: Käytä @supports-sääntöä parantaaksesi käyttäjäkokemusta selaimille, jotka tukevat edistyneitä ominaisuuksia, samalla kun tarjoat toimivan perusversion vanhemmille selaimille.
• Spesifisyys: Ole tietoinen CSS-spesifisyydestä käyttäessäsi @supports-sääntöä. Varmista, että @supports-säännön sisällä olevilla tyyleillä on sopiva spesifisyys ohittaakseen mahdolliset ristiriitaiset tyylit.
• Testaaminen: Testaa verkkosivustosi perusteellisesti eri selaimilla ja laitteilla varmistaaksesi, että @supports-säännöt toimivat odotetusti. Käytä selaimen kehitystyökaluja tarkastellaksesi sovellettuja tyylejä ja tunnistaaksesi mahdolliset yhteensopivuusongelmat.
• Valmistajakohtaiset etuliitteet: Kun tarkistat valmistajakohtaisilla etuliitteillä varustettuja ominaisuuksia, käytä or-operaattoria kattaaksesi eri etuliitteet. Esimerkiksi: @supports ((-webkit-transform: rotate(45deg)) or (transform: rotate(45deg))).
• Luettavuus: Muotoile @supports-sääntösi luettavuuden parantamiseksi. Käytä asianmukaista sisennystä ja kommentteja selittääksesi kunkin säännön tarkoituksen.
• Vältä liikakäyttöä: Vaikka @supports on tehokas, vältä sen liikakäyttöä. Liiallinen @supports-sääntöjen käyttö voi tehdä CSS:stäsi monimutkaisemman ja vaikeammin ylläpidettävän. Käytä sitä strategisesti tiettyjen yhteensopivuusongelmien ratkaisemiseen tai tiettyjen ominaisuuksien parantamiseen.

Vararatkaisujen tärkeys

Vararatkaisujen tarjoaminen on keskeinen osa @supports-säännön käyttöä. Se takaa yhtenäisen käyttäjäkokemuksen laajalla selainkirjolla, riippumatta niiden tuesta uudemmille CSS-ominaisuuksille. Hyvin suunnitellun vararatkaisun tulisi:

• Olla toimiva: Vararatkaisun tulisi tarjota ominaisuuden ydintoiminnallisuus, vaikka se ei näyttäisikään yhtä visuaalisesti miellyttävältä kuin parannettu versio.
• Olla saavutettava: Vararatkaisun tulisi olla saavutettava kaikille käyttäjille, myös vammaisille henkilöille.
• Olla ylläpidettävä: Vararatkaisun tulisi olla helppo ylläpitää ja päivittää.

Esimerkiksi, jos käytät grid-asettelua, vararatkaisu voi sisältää float- tai inline-block-ominaisuuksien käytön perusasettelun luomiseksi. Jos käytät CSS-muuttujia, voit tarjota oletusarvot väreille ja fonteille.

Selainyhteensopivuuden huomioiminen

Vaikka @supports-sääntö on laajalti tuettu moderneissa selaimissa, on tärkeää olla tietoinen joistakin yhteensopivuusnähtövyyksistä:

• Vanhemmat selaimet: Hyvin vanhat selaimet eivät välttämättä tue @supports-sääntöä lainkaan. Tällaisissa tapauksissa kaikki @supports-säännön sisällä olevat tyylit jätetään huomiotta. On erittäin tärkeää tarjota riittävät vararatkaisut näille selaimille.
• Internet Explorer: Internet Explorerin vanhemmilla versioilla on rajoitettu tuki CSS-ominaisuuksille. Testaa aina verkkosivustosi Internet Explorerissa varmistaaksesi, että vararatkaisut toimivat oikein. Harkitse ehdollisten kommenttien käyttöä IE-kohtaisiin korjauksiin tarvittaessa (vaikka tätä ei yleensä suositella ominaisuuksien tunnistamisen sijaan).
• Mobiiliselaimet: Mobiiliselaimilla on yleensä hyvä tuki @supports-säännölle. On kuitenkin silti tärkeää testata verkkosivustosi eri mobiililaitteilla ja näyttöko'oilla varmistaaksesi yhtenäisen käyttäjäkokemuksen.

Tarkista tiettyjen CSS-ominaisuuksien ja itse @supports-säännön selaintuki resursseista, kuten Can I use....

Saavutettavuuden huomioiminen

Kun käytät @supports-sääntöä, on elintärkeää ottaa huomioon saavutettavuus varmistaaksesi, että verkkosivustosi on kaikkien käytettävissä heidän kyvyistään riippumatta. Tässä on joitakin saavutettavuusnäkökohtia:

• Semanttinen HTML: Käytä semanttisia HTML-elementtejä antaaksesi sisällöllesi selkeän rakenteen ja merkityksen. Tämä auttaa avustavia teknologioita ymmärtämään ja tulkitsemaan verkkosivustoasi oikein.
• ARIA-attribuutit: Käytä ARIA-attribuutteja antamaan lisätietoja elementtiesi rooleista, tiloista ja ominaisuuksista. Tämä voi parantaa dynaamisen sisällön ja mukautettujen widgetien saavutettavuutta.
• Näppäimistönavigointi: Varmista, että kaikki verkkosivustosi interaktiiviset elementit ovat saavutettavissa näppäimistöllä. Käytä tabindex-attribuuttia hallitaksesi fokuksen järjestystä ja tarjoa visuaalisia vihjeitä osoittamaan, mikä elementti on tällä hetkellä fokuksessa.
• Värikontrasti: Varmista, että verkkosivustosi tekstin ja taustavärien välillä on riittävä värikontrasti. Tämä helpottaa näkövammaisten käyttäjien sisällön lukemista.
• Testaaminen avustavilla teknologioilla: Testaa verkkosivustosi avustavilla teknologioilla, kuten ruudunlukijoilla, varmistaaksesi, että se on saavutettava vammaisille käyttäjille.

Perusominaisuuksien tunnistamisen lisäksi: Tiettyjen arvojen tarkistaminen

Vaikka useimmat esimerkit keskittyvät ominaisuuksien tuen tarkistamiseen, @supports voi myös tarkistaa *tiettyjä* arvoja.

            @supports (transform-origin: 50% 50%) {
  .element {
    transform-origin: 50% 50%;
  }
}

            

              
                Copy
              
            
          

Tämä saattaa tuntua turhalta, mutta se on hyödyllistä, kun tarkistetaan monimutkaisempien arvojen tukea. Esimerkiksi:

            @supports (display: contents) {
  .element {
    display: contents;
  }
}

            

              
                Copy
              
            
          

Tämä esimerkki tarkistaa display-ominaisuuden arvon `contents` tuen. Vaikka display itsessään on laajalti tuettu, display: contents on uudempi lisäys, ja tämä antaa sinun tarjota vararatkaisun.

Ominaisuuksien tunnistamisen tulevaisuus

@supports-sääntö on modernin web-kehityksen kulmakivi, joka antaa kehittäjille mahdollisuuden omaksua uusia CSS-ominaisuuksia säilyttäen samalla yhteensopivuuden vanhempien selaimien kanssa. CSS:n jatkaessa kehittymistään @supports-sääntö pysyy olennaisena työkaluna vankkojen, responsiivisten ja tulevaisuudenkestävien verkkosivujen rakentamisessa. Yhdessä työkalujen, kuten PostCSS ja Babel, kanssa se auttaa kuromaan umpeen kuilua uusimpien ominaisuuksien ja laajan selainhyväksynnän välillä.

Yhteenveto

CSS:n @supports-sääntö on korvaamaton työkalu jokaiselle web-kehittäjälle, joka pyrkii luomaan moderneja, vankkoja ja selainyhteensopivia verkkosivustoja. Ymmärtämällä sen syntaksin, kyvyt ja parhaat käytännöt voit hyödyntää @supports-sääntöä parantaaksesi progressiivisesti suunnitelmiasi, tarjotaksesi sulavia vararatkaisuja ja varmistaaksesi yhtenäisen käyttäjäkokemuksen laajalla selain- ja laitekirjolla. Hyödynnä ominaisuuksien tunnistamisen voima ja nosta web-kehitystaitosi seuraavalle tasolle. Muista testata perusteellisesti ja tarjota harkittuja vararatkaisuja palvellaksesi ihmisten maailmanlaajuisesti käyttämien verkkoselaimien moninaista kirjoa.